<template>
	<view class="recharge-order">
		<view class="header-box">
			<view>兑换日期：</view>
			<uni-datetime-picker v-model="range" type="daterange" @change="confirmEvent" />
		</view>
		<view class="time-box">
			<text>兑换总数：<text class="num-text">{{total}}</text></text>
		</view>
		<scroll-view scroll-y class="scroll-box" @scrolltolower="getDataEvent">
			<view class="main">
				<view class="card-box" v-for="(item,index) in listData" :key="index" @click="toUserDetail(item)">
					<view class="card-title">订单号：{{item.orderNumber}}</view>
					<view class="card-title">劵码：{{item.ticketCode}}</view>
					<view class="card-title">兑换时长卡ID：{{item.timeCardId}}</view>
					<view class="card-text">兑换日期：{{item.useTime}}</view>
					<view class="card-text">用户名：{{item.userName}}</view>
					<view class="card-text">手机号：{{item.userMobile}}</view>
					<view class="card-text">团购名称：{{item.mtName}}</view>
					<view class="card-text">卡券名称：{{item.timeCardName}}</view>
				</view>
			</view>
			<view class="noMore">暂无更多</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				range: [],
				listData: [],
				shopId: '',
				startDate: '',
				endDate: '',
				totalTime: 0,
				pageSize: 10,
				pageNum: 1,
				total: 0,
				platform: ''
			};
		},
		methods: {
			// 选择日期
			confirmEvent(dateArr) {
				this.startDate = dateArr[0]
				this.endDate = dateArr[1]
				this.pageNum = 1
				this.listData = []
				if (this.platform === 'mt') {
					this.getMtRecordList();
				} else if (this.platform === 'dy') {
					this.getDyRecordList()
				}
			},
			getDataEvent() {
				if (this.listData.length < this.total) {
					this.pageNum++
					if (this.platform === 'mt') {
						this.getMtRecordList();
					} else if (this.platform === 'dy') {
						this.getDyRecordList()
					}
				}
			},
			// 跳转用户详情
			toUserDetail(item){
				uni.navigateTo({
					url:`/pages/user-detail/user-detail?userId=${item.userId}&shopId=${this.shopId}`
				})
			},
			// 获取美团时间卡兑换列表
			getMtRecordList() {
				const data = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					shopId: this.shopId,
					useStartDate: this.startDate,
					useEndDate: this.endDate
				}
				this.$request({
					method: 'post',
					url: '/applet/store/timeCard/mtRecordList',
					data,
					loading: true,
					isEncrypt: false
				}).then(res => {
					if (res.rows?.length > 0) {
						this.listData = [...this.listData, ...res.rows];
					}
					this.total = res.total;
				}).catch(err => {
					console.log('请求异常：', err)
				})
			},
			// 获取抖音时间卡兑换列表
			getDyRecordList() {
				const data = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					shopId: this.shopId,
					useStartDate: this.startDate,
					useEndDate: this.endDate
				}
				this.$request({
					method: 'post',
					url: '/applet/store/timeCard/dyRecordList',
					data,
					loading: true,
					isEncrypt: false
				}).then(res => {
					if (res.rows?.length > 0) {
						this.listData = [...this.listData, ...res.rows];
					}
					this.total = res.total;
				}).catch(err => {
					console.log('请求异常：', err)
				})
			}
		},
		onLoad(option) {
			this.platform = option.platform;
			this.shopId = option.shopId;
			if (this.platform === 'mt') {
				uni.setNavigationBarTitle({
					title: '美团兑换记录'
				});
				this.getMtRecordList();
			} else if (this.platform === 'dy') {
				uni.setNavigationBarTitle({
					title: '抖音兑换记录'
				});
				this.getDyRecordList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recharge-order {

		.header-box {
			background-color: #FFF;
			display: flex;
			padding: 10rpx 20rpx;
			align-items: center;
			font-size: 28rpx;
		}

		.time-box {
			font-weight: 600;
			background: #FFF;
			padding: 20rpx;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.num-text {
				color: #ff9600;
			}
		}

		.scroll-box {
			height: calc(100vh - 248rpx);
		}

		.main {
			padding: 20rpx;
			background: #FFF;
		}

		.card-box {
			background: #FFF;
			border: 1px solid #EEE;
			border-radius: 20rpx;
			padding: 20rpx;
			box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
			margin-bottom: 20rpx;
		}

		.card-title {
			font-weight: bold;
			font-size: 30rpx;
		}

		.card-text {
			color: #333;
			font-size: 28rpx;
			margin-top: 20rpx;
		}

		.noMore {
			text-align: center;
			padding: 32rpx 0;
			color: #CCC;
			font-size: 28rpx;
		}
	}
</style>